<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- favicon -->
    <link rel="icon" href="{{ url_for('images', path=metatags.favicon) }}" sizes="32x32" />
    <!-- OpenGraph metadata -->
    <title>{{ data.title }}</title>
    <meta property="og:title" content="{{ data.title }}">
    <meta property="og:description" content="{{ metatags.description }}">
    <meta property="og:image" content="{{ url_for('images', path=metatags.image) }}">
    <meta property="og:url" content="{{ metatags.url }}">
    <meta property="og:site_name" content="{{ metatags.sitename }}">
    <meta property="og:type" content="{{ metatags.type }}">
    <!-- Stylesheets -->
    <link href="{{ url_for('styles', path='styles.css') }}" rel="stylesheet">
    <!-- Fontawesome for icons -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
    <!-- jquery and datatables scripts -->
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script defer src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script defer src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
    <script defer src="https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js"></script>
    <!-- custom scripts -->
    <script defer src="{{ url_for('scripts', path='app.js') }}"></script>

</head>